<template>
  <FModal width="400" header="配置菜单"
          ref="refFModal" @ok="ok">
    <FPage class="menu-config-wrapper">
      <template #header>
        <div style="padding: 5px">
          <el-button icon="ok" round @click="selectAll"
                     type="primary">全选
          </el-button>
          <el-button icon="clear" round @click="clearAll"
                     type="warning">全不选
          </el-button>
        </div>
        <div>
          <el-input v-model="filterText" placeholder="菜单名称"/>
        </div>
      </template>
      <div class="menu-config-body">
        <el-tree
          :expand-on-click-node="false" @check="checkChange"
          auto-expand-parent ref="treeRef" show-checkbox
          class="filter-tree" :data="menus" :indent="5"
          :props="defaultProps" default-expand-all
          :filter-node-method="filterNode" node-key="id">
        </el-tree>
      </div>
    </FPage>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {shallowRef, watch} from 'vue';
import FPage from '@/components/layout/FPage.vue';
import {getAction, postAction} from '@/request/BaseRequest';
import {isEmpty, listToTrees, real, treesForeach} from '@/utils/CommonUtils';

const refFModal = shallowRef();
const defaultProps = {
  children: 'children',
  label: 'menuName',
};
const menus = shallowRef([]);
const loading = shallowRef(false);
const filterText = shallowRef();
const treeRef = shallowRef();
let roleData = undefined;

function setData(role) {
  roleData = real(role);
  refFModal.value.open();
  loadAllMenus();
}

function loadAllMenus() {
  loading.value = true;
  getAction('/sys/menu/loadAllMenus').then(data => {
    loading.value = false;
    if (data.success) {
      setMenus(data.result);
      loadRoleMenus();
    }
  });
}

function loadRoleMenus() {
  loading.value = true;
  getAction('/sys/menu/getRoleMenus',
    {roleId: roleData.id}).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      setCheckTrees(result);
    }
  });
}

function setCheckTrees(roleMenus) {
  let ids = roleMenus.map(r => r.menuId);
  let temp = [];
  treesForeach(real(menus), m => {
    if (isEmpty(m.children)
      && ids.findIndex(id => id === m.id) !== -1) {
      temp.push(m.id);
    }
  });
  treeRef.value.setCheckedKeys(temp);
}

function checkChange() {

}

function ok() {
  let keys1 = treeRef.value.getCheckedKeys();
  let keys2 = treeRef.value.getHalfCheckedKeys();
  loading.value = true;
  postAction('/sys/menu/saveRoleMenus', {
    roleId: roleData.id,
    menus: [...real(keys1), ...real(keys2)]
  }).then(data => {
    loading.value = false;
    if (data.success) {
      refFModal.value.close();
    }
  });
}

function setMenus(list) {
  if (isEmpty(list)) {
    menus.value = [];
    return;
  }
  menus.value = listToTrees(list);
}

function filterNode(value, data) {
  if (!value) return true;
  return data.menuName.includes(value);
}

function clearAll() {
  treeRef.value.setCheckedKeys([]);
}

function selectAll() {
  let list = [];
  treesForeach(real(menus), node => {
    list.push(node.id);
  });
  treeRef.value.setCheckedKeys(list);
}

watch(filterText, (val) => {
  treeRef.value.filter(val);
});

defineExpose({
  setData
});

</script>
<script>
export default {
  name: 'MenuConfigModal'
};
</script>
<style>
.menu-config-wrapper .f-page-body {
  background: white;
}

.f-modal-fullscreen-body .menu-config-body {
  height: 100%;
}

.f-modal-body .menu-config-body {
  height: 450px;
}
</style>
